<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>发送邮件</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<style>
    .header {
        height: 82px;
        border-bottom: 1px solid #404553;
        background-color: #ffffff;
    }

    .logo {
        height: 100%;
        float: left;
        padding-left: 30px;
    }

    .title {
        color: #404553;
        font-size: 10px;
        float: left;
        padding-top: 46px;
        padding-left: 40px;
    }

    .layui-row {
        padding-top: 20px
    }

    .upload {
        margin-left: 30px;
        float: left;
    }

    .sendmail {
        float: right;
    }

    .excel {
        float: left;
        padding-left: 30px;
        font-size: 25px;
        color: #404553;
        text-align: center;
    }

    .layui-box {
        padding-left: 30px;
    }

    .layerpage {
        float: right
    }

    .inputmonth {
        width: 140px;
        float: right;
        margin-right: 20px;
        color: #54DDAF
    }
</style>

<body>
    <div class="layui-header header header-doc">
        <div class="layui-main">
            <div class="logo">
                <img src="./img/logo.jpg" alt="">
            </div>
            <div class="title">
                <h2>发送邮件</h2>
            </div>
        </div>

    </div>
    <div class="layui-main">
        <div class="layui-row">
            <button type="button" class="layui-btn upload" lay-data="{accept: 'file'}" id="uploadfile">
                <i class="layui-icon">&#xe67c;</i>上传文件
            </button>
            <div class="excel">
                <h></h>
            </div>
            <button type="button" class="layui-btn layui-btn-normal sendmail" onclick="sendmail()" id="sendmailbutton">
                <i class="layui-icon" id="uditbutton">&#xe609;</i>发送邮件
            </button>
            <form class="layui-form inputmonth" action="">
                <div class="layui-form-item ">
                    <select name="month" lay-verify="required" id="month">
                        <option value="1">1月</option>
                        <option value="2">2月</option>
                        <option value="3">3月</option>
                        <option value="4">4月</option>
                        <option value="5">5月</option>
                        <option value="6">6月</option>
                        <option value="7">7月</option>
                        <option value="8">8月</option>
                        <option value="9">9月</option>
                        <option value="10">10月</option>
                        <option value="11">11月</option>
                        <option value="12">12月</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="layui-box">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                </colgroup>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>部门</th>
                        <th>姓名</th>
                        <th>卡发工资</th>
                        <th>邮箱</th>
                        <th>发送状态</th>
                    </tr>
                </thead>
                <tbody id="data_List_view">

                </tbody>
            </table>
        </div>
        <div id="page" class="layerpage"></div>
    </div>
    <!-- 你的HTML代码 -->
    <script type="text/html" id="data_List_tpl">
    <tr>
            <td>{{d.xh}}</td>
            <td>{{d.bm}}</td>
            <td>{{d.xm}}</td>
            <td>{{d.kfgz}}</td>
            <td>{{d.yx}}</td> 
            <td id="ID_{{d.xh}}">{{d.fszt}}</td>
    </tr>
    
    </script>

    <script type="text/html" id="jdt">
        <div style="text-align: center;" >
            <p> 正在发送邮件
            </p> 
        <canvas id="canvas10" ></canvas>  
        <div>
                <i id="number">0</i>
                <i id="count">/0</i>
        </div>          
       <div>
    </script>
    <script src="../js/jquery-2.2.3.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../layui/laytpl.js"></script>
    <script type="text/javascript" src="js/Progress.js"></script>

    <script>
        //一般直接写在一个js文件中

        var data = []
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;


        });
        var maths = 0


        // var aa = setInterval(function () {
        //     maths = Math.floor(Math.random() * 100)
        //     new Progress().renderAll('canvas10', 100, 5, maths, 100);
        //     if (maths >= 100) { clearInterval(aa) }
        // }, 1000)


        //默认月份
        var date = new Date().getMonth();
        $("#month").val(date)
        //上传xlsl
        layui.use('upload', function () {
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#uploadfile' //绑定元素
                , url: 'api/upload/' //上传接口
                , done: function (res, index, upload) {
                    // console.log(res.filename)
                    $(".excel h").text(res.filename)
                    data = res.data
                    for (let i in data) {
                        data[i].push({ key: "发送状态", value: "待发送" })
                    }
                    var count = data.length
                    showdata(1, 20)
                    data_laypage(count)
                    layer.msg('文件上传成功');
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });
        function data_laypage(count) {
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                    , limit: 20
                    , count: count
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        // console.log(obj.limit); //得到每页显示的条数
                        showdata(obj.curr, obj.limit)
                        //首次不执行
                        if (!first) {
                            //do something
                        }
                    } //数据总数，从服务端得到
                });
            });
        }

        function showdata(curr, limit) {
            var pageindex = (curr - 1) * limit
            var len = 0
            if (pageindex + limit > data.length - limit) {
                len = data.length
            } else {
                len = pageindex + limit
            }
            var view = $("#data_List_view")
            var tpl = $("#data_List_tpl").html()
            view.empty();
            var src = ''
            for (var i = pageindex; i < len; i++) {
                var render_data = new Object()
                for (var k in data[i]) {
                    if (data[i][k].key == '序号') render_data.xh = data[i][k].value;
                    if (data[i][k].key == '部门') render_data.bm = data[i][k].value;
                    if (data[i][k].key == '姓名') render_data.xm = data[i][k].value;
                    if (data[i][k].key == '卡发工资') render_data.kfgz = '****'//data[i][k].value;
                    if (data[i][k].key == '邮箱') render_data.yx = data[i][k].value;
                    if (data[i][k].key == '发送状态') render_data.fszt = data[i][k].value;
                }

                laytpl(tpl).render(render_data, function (html) {
                    src += html;
                });
            }
            view.append(src)

        }
        function sendmail() {
            if (data.length <= 0) {
                layer.msg("请先上传文件")
            } else {
                var cnt = 0;
                var option = {
                    data_str: data,
                    month: $("#month").val()
                }
                var wsServer = new WebSocket('ws://10.2.10.100:3888');
                wsServer.onopen = function (e) {
                    wsServer.send(JSON.stringify(option))
                }
                window.onload = function () {
                    new Progress().renderOne('canvas10', 100, 5, maths);
                }
                var index = layer.open({
                    closeBtn: 0,
                    title: false,
                    area: ['200px', '250px'],
                    btn: [],
                    content: $("#jdt").html()
                });;
                $("#count").text('/' + (data.length).toString()); //总数渲染
                wsServer.onmessage = function (d) {
                    var retdata = JSON.parse(d.data)
                    $("#ID_" + retdata.ID).text(retdata.msg)
                    data[retdata.ID - 1][28].value = retdata.msg
                    $("#number").text(retdata.cnt)
                    var maths = Math.floor(retdata.cnt * 100 / data.length)
                    if (maths >= 100) {
                        maths = 100;
                        layer.close(index)
                        layer.msg("邮件发送结束")
                        wsServer.close()
                    }
                    new Progress().renderAll('canvas10', 100, 5, maths, 100);
                };
                wsServer.onclose = function (e) {
                    wsServer.close(); //关闭TCP连接  
                };
            }
        }
    </script>
</body>

</html>